<template>
  <div class="mobile-workload-query">
    <!-- 顶部导航栏 -->
    <div class="mobile-header">
      <div class="header-content">
        <h1 class="header-title">
          <i class="bi bi-bar-chart"></i>
          退费任务工作量查询
        </h1>
        <div class="header-actions">
          <button class="btn btn-sm btn-outline-light" @click="refreshData" :disabled="loading">
            <i class="bi bi-arrow-clockwise"></i>
          </button>
          <button class="btn btn-sm btn-outline-light" @click="goBack">
            <i class="bi bi-arrow-left"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="mobile-content">
      <!-- 搜索和筛选区域 -->
      <div class="search-section">
        <div class="search-input-group">
          <div class="input-group">
            <span class="input-group-text">
              <i class="bi bi-search"></i>
            </span>
            <input 
              type="text" 
              class="form-control" 
              placeholder="输入姓名搜索..."
              v-model="searchQuery"
              @input="handleSearch"
            >
            <button 
              class="btn btn-outline-secondary" 
              type="button" 
              @click="clearSearch"
              v-if="searchQuery"
            >
              <i class="bi bi-x"></i>
            </button>
          </div>
        </div>

        <!-- 排序选项 -->
        <div class="sort-options">
          <div class="sort-label">排序方式：</div>
          <select class="form-select" v-model="sortBy" @change="handleSort">
            <option value="fullName">按姓名</option>
            <option value="taskReceived">按接收任务数</option>
            <option value="resultRecorded">按已记录结果</option>
            <option value="callAmount">按外呼数量</option>
            <option value="completionRate">按完成率</option>
            <option value="callRate">按外呼有效率</option>
          </select>
          <button class="btn btn-sm" :class="sortOrder === 'asc' ? 'btn-primary' : 'btn-outline-primary'" @click="toggleSortOrder">
            <i :class="sortOrder === 'asc' ? 'bi bi-sort-up' : 'bi bi-sort-down'"></i>
          </button>
        </div>

        <!-- 当前用户工作量卡片 -->
        <div class="current-user-workload" v-if="currentUserWorkload">
          <div class="workload-card current-user compact">
            <div class="compact-header">
              <i class="bi bi-person-circle"></i>
              <span class="compact-title">我的工作量</span>
            </div>
            <div class="compact-stats">
              <div class="compact-item">
                <div class="compact-value">{{ currentUserWorkload.taskReceived || 0 }}</div>
                <div class="compact-label">接收</div>
              </div>
              <div class="compact-item">
                <div class="compact-value">{{ currentUserWorkload.resultRecorded || 0 }}</div>
                <div class="compact-label">已记录</div>
              </div>
              <div class="compact-item">
                <div class="compact-value">{{ currentUserWorkload.callAmount || 0 }}</div>
                <div class="compact-label">外呼</div>
              </div>
              <div class="compact-item">
                <div class="compact-value">{{ (currentUserWorkload.completionRate || 0).toFixed(0) }}%</div>
                <div class="compact-label">完成</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工作量列表 -->
      <div class="workload-list" v-if="workloadData.length > 0">
        <div 
          v-for="(item, index) in sortedWorkloadData" 
          :key="item.username"
          class="workload-card"
          :class="{ 'current-user-card': item.username === currentUsername }"
        >
          <!-- 用户基本信息 -->
          <div class="user-info">
            <div class="user-avatar">
              <i class="bi bi-person-fill"></i>
            </div>
            <div class="user-details">
              <div class="user-name">{{ item.fullName || item.username }}</div>
              <div class="user-username">@{{ item.username }}</div>
            </div>
          </div>

          <!-- 工作量统计 -->
          <div class="workload-stats elegant-stats">
            <div class="elegant-row">
              <div class="elegant-card">
                <div class="elegant-icon">
                  <i class="bi bi-inbox"></i>
                </div>
                <div class="elegant-content">
                  <div class="elegant-value">{{ item.taskReceived || 0 }}</div>
                  <div class="elegant-label">接收</div>
                </div>
              </div>
              <div class="elegant-card">
                <div class="elegant-icon">
                  <i class="bi bi-check-circle"></i>
                </div>
                <div class="elegant-content">
                  <div class="elegant-value">{{ item.resultRecorded || 0 }}</div>
                  <div class="elegant-label">已记录</div>
                </div>
              </div>
              <div class="elegant-card">
                <div class="elegant-icon">
                  <i class="bi bi-telephone"></i>
                </div>
                <div class="elegant-content">
                  <div class="elegant-value">{{ item.callAmount || 0 }}</div>
                  <div class="elegant-label">外呼</div>
                </div>
              </div>
              <div class="elegant-card">
                <div class="elegant-icon">
                  <i class="bi bi-list-check"></i>
                </div>
                <div class="elegant-content">
                  <div class="elegant-value">{{ item.taskAmount || 0 }}</div>
                  <div class="elegant-label">总任务</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 完成率进度条 -->
          <div class="progress-section">
            <div class="progress-item">
              <div class="progress-label">
                <span>完成率</span>
                <span>{{ (item.completionRate || 0).toFixed(1) }}%</span>
              </div>
              <div class="progress-bar-container">
                <div 
                  class="progress-bar-fill" 
                  :style="{ width: Math.min(item.completionRate || 0, 100) + '%' }"
                  :class="getProgressClass(item.completionRate)"
                ></div>
              </div>
            </div>
            <div class="progress-item">
              <div class="progress-label">
                <span>外呼有效率(拨打电话数与记录联系结果数比较)</span>
                <span>{{ (item.callRate || 0).toFixed(1) }}%</span>
              </div>
              <div class="progress-bar-container">
                <div 
                  class="progress-bar-fill" 
                  :style="{ width: Math.min(item.callRate || 0, 100) + '%' }"
                  :class="getProgressClass(item.callRate)"
                ></div>
              </div>
            </div>
          </div>

          <!-- 排名标识 -->
          <div class="ranking-badge" v-if="sortBy !== 'fullName'">
            <span class="rank-number">#{{ index + 1 }}</span>
          </div>
        </div>
      </div>

      <!-- 无数据提示 -->
      <div class="empty-state" v-if="workloadData.length === 0 && !loading">
        <div class="empty-icon">
          <i class="bi bi-inbox"></i>
        </div>
        <div class="empty-title">暂无工作量数据</div>
        <div class="empty-subtitle">请稍后再试或联系管理员</div>
      </div>

      <!-- 搜索结果为空 -->
      <div class="empty-state" v-if="workloadData.length > 0 && sortedWorkloadData.length === 0">
        <div class="empty-icon">
          <i class="bi bi-search"></i>
        </div>
        <div class="empty-title">未找到匹配数据</div>
        <div class="empty-subtitle">请尝试其他搜索条件</div>
      </div>

      <!-- 加载状态 -->
      <div class="loading-state" v-if="loading">
        <div class="loading-spinner">
          <div class="spinner"></div>
        </div>
        <div class="loading-text">{{ loadingText }}</div>
      </div>

      <!-- 统计汇总 - 固定在底部显示 -->
      <div class="summary-section fixed-bottom" v-if="workloadData.length > 0">
        <div class="summary-card">
          <div class="summary-title">统计汇总</div>
          <div class="summary-stats">
            <div class="summary-item">
              <div class="summary-value">{{ totalUsers }}</div>
              <div class="summary-label">总用户数</div>
            </div>
            <div class="summary-item">
              <div class="summary-value">{{ totalTasks }}</div>
              <div class="summary-label">总任务数</div>
            </div>
            <div class="summary-item">
              <div class="summary-value">{{ totalCompleted }}</div>
              <div class="summary-label">已完成</div>
            </div>
            <div class="summary-item">
              <div class="summary-value">{{ averageCompletionRate }}%</div>
              <div class="summary-label">平均完成率</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import api from '@/utils/api'

export default {
  name: 'RefundTaskWorkloadQuery',
  setup() {
    const router = useRouter()
    const authStore = useAuthStore()
    
    const loading = ref(false)
    const loadingText = ref('加载中...')
    const workloadData = ref([])
    const currentUserWorkload = ref(null)
    const searchQuery = ref('')
    const sortBy = ref('completionRate')
    const sortOrder = ref('desc')
    const currentUsername = ref('')

    // 获取当前用户信息
    const getCurrentUser = () => {
      const userInfo = authStore.userInfo
      currentUsername.value = userInfo?.username || ''
      return userInfo
    }

    // 获取所有用户工作量
    const fetchAllWorkload = async () => {
      loading.value = true
      loadingText.value = '获取工作量数据中...'
      try {
        const response = await api.post('/api/RefundTaskWorkload/all')
        if (response.data?.success) {
          workloadData.value = response.data.data || []
        } else {
          console.error('获取工作量数据失败:', response.data?.message)
        }
      } catch (error) {
        console.error('获取工作量数据错误:', error)
      } finally {
        loading.value = false
      }
    }

    // 获取当前用户工作量
    const fetchCurrentUserWorkload = async () => {
      if (!currentUsername.value) return
      
      try {
        const response = await api.post('/api/RefundTaskWorkload/user', {
          username: currentUsername.value
        })
        if (response.data?.success) {
          currentUserWorkload.value = response.data.data
        } else {
          console.error('获取当前用户工作量失败:', response.data?.message)
        }
      } catch (error) {
        console.error('获取当前用户工作量错误:', error)
      }
    }

    // 刷新数据
    const refreshData = async () => {
      await fetchAllWorkload()
      await fetchCurrentUserWorkload()
    }

    // 返回上一页
    const goBack = () => {
      router.back()
    }

    // 搜索过滤
    const handleSearch = () => {
      // 搜索逻辑在computed中处理
    }

    // 清除搜索
    const clearSearch = () => {
      searchQuery.value = ''
    }

    // 排序处理
    const handleSort = () => {
      // 排序逻辑在computed中处理
    }

    // 切换排序顺序
    const toggleSortOrder = () => {
      sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
    }

    // 获取进度条样式类
    const getProgressClass = (rate) => {
      const value = rate || 0
      if (value >= 80) return 'excellent'
      if (value >= 60) return 'good'
      if (value >= 40) return 'average'
      return 'poor'
    }

    // 过滤后的数据
    const filteredData = computed(() => {
      if (!searchQuery.value) return workloadData.value
      
      const query = searchQuery.value.toLowerCase()
      return workloadData.value.filter(item => 
        (item.fullName && item.fullName.toLowerCase().includes(query)) ||
        (item.username && item.username.toLowerCase().includes(query))
      )
    })

    // 排序后的数据
    const sortedWorkloadData = computed(() => {
      const data = [...filteredData.value]
      
      data.sort((a, b) => {
        let valueA = a[sortBy.value] || 0
        let valueB = b[sortBy.value] || 0
        
        // 对于百分比字段，确保是数字类型
        if (sortBy.value === 'completionRate' || sortBy.value === 'callRate') {
          valueA = parseFloat(valueA) || 0
          valueB = parseFloat(valueB) || 0
        }
        
        if (sortOrder.value === 'asc') {
          return valueA - valueB
        } else {
          return valueB - valueA
        }
      })
      
      return data
    })

    // 统计汇总
    const totalUsers = computed(() => workloadData.value.length)
    const totalTasks = computed(() => 
      workloadData.value.reduce((sum, item) => sum + (item.taskAmount || 0), 0)
    )
    const totalCompleted = computed(() => 
      workloadData.value.reduce((sum, item) => sum + (item.resultRecorded || 0), 0)
    )
    const averageCompletionRate = computed(() => {
      if (workloadData.value.length === 0) return 0
      const total = workloadData.value.reduce((sum, item) => sum + (item.completionRate || 0), 0)
      return (total / workloadData.value.length).toFixed(1)
    })

    onMounted(async () => {
      getCurrentUser()
      await refreshData()
    })

    return {
      loading,
      loadingText,
      workloadData,
      currentUserWorkload,
      searchQuery,
      sortBy,
      sortOrder,
      currentUsername,
      sortedWorkloadData,
      totalUsers,
      totalTasks,
      totalCompleted,
      averageCompletionRate,
      refreshData,
      goBack,
      handleSearch,
      clearSearch,
      handleSort,
      toggleSortOrder,
      getProgressClass
    }
  }
}
</script>

<style scoped>
.mobile-workload-query {
  min-height: 100vh;
  background-color: #f8f9fa;
  /* 为底部固定汇总留出空间 */
  padding-bottom: 80px;
}

/* 顶部导航栏 - 与现有页面保持一致 */
/* 顶部导航栏 - 与退款任务管理页面保持一致 */
.mobile-header {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1565c0;
  padding: 0.32rem;
  padding-top: calc(0.32rem + env(safe-area-inset-top));
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #90caf9;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  color: #0d47a1;
  line-height: 1.2;
}

.header-actions {
  display: flex;
  gap: 0.5rem;
}

.header-actions .btn {
  border-radius: 6px;
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: #1976d2;
  color: #1976d2;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.header-actions .btn:hover {
  background: #1976d2;
  color: white;
  border-color: #1976d2;
}

/* 主要内容区域 - 与退款任务管理页面保持一致 */
.mobile-content {
  padding: 1rem;
  /* 为sticky header留出空间，避免内容被遮挡 */
  padding-top: calc(1rem + 60px);
  /* header高度约60px */
}

/* 搜索区域 */
.search-section {
  margin-bottom: 1rem;
}

.search-input-group {
  margin-bottom: 1rem;
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group-text {
  background-color: white;
  border: 1px solid #dee2e6;
  border-right: none;
  border-radius: 0.375rem 0 0 0.375rem;
  padding: 0.5rem 0.75rem;
}

.form-control {
  border: 1px solid #dee2e6;
  border-left: none;
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  border-color: #667eea;
}

.btn-outline-secondary {
  border: 1px solid #dee2e6;
  background-color: white;
  color: #6c757d;
}

.sort-options {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sort-label {
  font-size: 0.875rem;
  color: #6c757d;
  white-space: nowrap;
}

.form-select {
  flex: 1;
  min-width: 120px;
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
}

/* 工作量卡片 */
.workload-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
}

.workload-card.current-user-card {
  border-left: 4px solid #667eea;
}

.current-user-workload {
  margin-bottom: 1rem;
}

.workload-card.current-user {
  border-left: 4px solid #28a745;
  background: linear-gradient(135deg, #f8fff9 0%, #e8f5e8 100%);
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.user-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 0.75rem;
}

.user-details .user-name {
  font-weight: 600;
  font-size: 1rem;
  color: #212529;
}

.user-details .user-username {
  font-size: 0.875rem;
  color: #6c757d;
}

.workload-stats {
  margin-bottom: 1rem;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.stat-row:last-child {
  margin-bottom: 0;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #212529;
}

.progress-section {
  margin-top: 1rem;
}

.progress-item {
  margin-bottom: 0.75rem;
}

.progress-item:last-child {
  margin-bottom: 0;
}

.progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.progress-bar-container {
  height: 0.5rem;
  background-color: #e9ecef;
  border-radius: 0.25rem;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 0.25rem;
}

.progress-bar-fill.excellent {
  background: linear-gradient(90deg, #28a745, #20c997);
}

.progress-bar-fill.good {
  background: linear-gradient(90deg, #17a2b8, #20c997);
}

.progress-bar-fill.average {
  background: linear-gradient(90deg, #ffc107, #fd7e14);
}

.progress-bar-fill.poor {
  background: linear-gradient(90deg, #dc3545, #e83e8c);
}

.ranking-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* 统计汇总 */
.summary-section {
  margin-top: 1rem;
}

.summary-card {
  background: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.summary-title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  color: #212529;
}

.summary-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-item {
  text-align: center;
  flex: 1;
  min-width: 60px;
}

.summary-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #667eea;
}

.summary-label {
  font-size: 0.75rem;
  color: #6c757d;
}

/* 空状态和加载状态 */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #6c757d;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.empty-subtitle {
  font-size: 0.875rem;
  opacity: 0.8;
}

.loading-state {
  text-align: center;
  padding: 3rem 1rem;
}

.loading-spinner .spinner {
  width: 2rem;
  height: 2rem;
  border: 0.25rem solid #f3f3f3;
  border-top: 0.25rem solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  color: #6c757d;
  font-size: 0.875rem;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .mobile-content {
    padding: 0.5rem;
  }
  
  .sort-options {
    flex-direction: column;
    align-items: stretch;
  }
  
  .stat-row {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .summary-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 紧凑模式样式 - 当前用户工作量卡片压缩50% */
.compact {
  padding: 0.5rem;
  margin-bottom: 0.75rem;
}

.compact-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.compact-header i {
  font-size: 1rem;
}

.compact-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #28a745;
}

.compact-stats {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
}

.compact-item {
  text-align: center;
  flex: 1;
}

.compact-value {
  font-size: 1rem;
  font-weight: 700;
  color: #212529;
  line-height: 1;
}

.compact-label {
  font-size: 0.625rem;
  color: #6c757d;
  margin-top: 0.125rem;
}

/* 优雅卡片式统计样式 */
.elegant-stats {
  margin-bottom: 1rem;
}

.elegant-row {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
}

.elegant-card {
  flex: 1;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  padding: 0.75rem 0.25rem;
  text-align: center;
  transition: all 0.3s ease;
  min-width: 0;
}

.elegant-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-color: #667eea;
}

.elegant-icon {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
  color: #667eea;
  display: block;
}

.elegant-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.elegant-value {
  font-size: 1rem;
  font-weight: 700;
  color: #212529;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elegant-label {
  font-size: 0.7rem;
  color: #6c757d;
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* 响应式优雅卡片 */
@media (max-width: 480px) {
  .elegant-row {
    gap: 0.25rem;
  }
  
  .elegant-card {
    padding: 0.5rem 0.125rem;
    border-radius: 0.5rem;
  }
  
  .elegant-icon {
    font-size: 1rem;
    margin-bottom: 0.1rem;
  }
  
  .elegant-value {
    font-size: 0.9rem;
  }
  
  .elegant-label {
    font-size: 0.65rem;
  }
}

@media (max-width: 360px) {
  .elegant-value {
    font-size: 0.8rem;
  }
  
  .elegant-label {
    font-size: 0.6rem;
  }
  
  .elegant-icon {
    font-size: 0.9rem;
  }
}
</style>

/* 统计汇总 - 固定在底部 */
.summary-section.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  margin: 0;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.summary-section.fixed-bottom .summary-card {
  margin: 0;
  padding: 0.75rem;
  box-shadow: none;
  border: none;
  background: transparent;
}

.summary-section.fixed-bottom .summary-title {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  text-align: center;
  color: #495057;
}

.summary-section.fixed-bottom .summary-stats {
  gap: 0.25rem;
}

.summary-section.fixed-bottom .summary-item {
  min-width: 50px;
}

.summary-section.fixed-bottom .summary-value {
  font-size: 1rem;
  font-weight: 600;
}

.summary-section.fixed-bottom .summary-label {
  font-size: 0.6875rem;
  color: #6c757d;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .summary-section.fixed-bottom {
    padding: 0.375rem 0.25rem;
  }
  
  .summary-section.fixed-bottom .summary-card {
    padding: 0.5rem;
  }
  
  .summary-section.fixed-bottom .summary-value {
    font-size: 0.875rem;
  }
  
  .summary-section.fixed-bottom .summary-label {
    font-size: 0.625rem;
  }
}

/* 确保主要内容不被底部汇总遮挡 */
.mobile-content {
  padding: 1rem;
  /* 为sticky header留出空间 */
  padding-top: calc(1rem + 60px);
  /* 为底部固定汇总留出空间 */
  padding-bottom: calc(1rem + 70px);
}